<!--
 * @Description:
 * @version:
 * @Author: 尹鹏孝
 * @Date: 2023-02-20 10:45:44
 * @LastEditors: 尹鹏孝
 * @LastEditTime: 2023-02-20 11:28:28
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css浮动和定位</title>
    <style>
        .a-box{
            /* float: right; */
            background-color: #f0f0f0;
            overflow: auto;
        }
        .h-child{
            float: left;
        }
        .h-child-right{
            float:right;
        }
        .one{
            background-color: #df1;
        }
        .two{
            background-color: aquamarine;
        }
        .three{
            background-color: blue;
        }
        .four{
            background-color: blueviolet;
        }
         .a-box p{
            margin: 0;
            padding: 0;

         }
          .a-box p span{
                height: 100%;
                display: block;
            }
        .a-box p:after{
                clear: both;
                content: " ";
                display: block;
        }
        .w-50{
                /* width: 50%;
                max-width: 50%; */
        }
    </style>
</head>
<body>
    <div style="height: 200px;">这个行很高</div>
    <div class="a-box">
        <p>
            dsfs afsa fsaf
            sd afa sfda safsafsafsafd safadsfs afsafsaf
            sdafasfd afsafsafsafsafdsaf adsfs afsafsaf
            sdafasfdafsafsafsa fsafdsa fadsfsaf safsaf
            sdaf asfdafsaf safsafsafd safadsfsafsa fsaf
            sdaf asfdafsaf safsafsafd safad sfsaf safsaf
            s dafas fdafsafs afsafsaf dsafadsf safsafsaf
            sda fasfdaf safsafsafsafdsaf adsfs afs afsaf
            sdafa sfdafsaf safsafs afdsafadsfsafsafsaf
            sdaf asfdafs afsafsafsaf ds afa
        </p>

    <div class="h-child one w-50">
        ....这个元素也是在浮动1
    </div>
        <p>

            <span class="h-child-right two w-50">........这个元素也是在浮动2............这个元素也是在浮动2............这个元素也是在浮动2............这个元素也是在浮动2............这个元素也是在浮动2............这个元素也是在浮动2............这个元素也是在浮动2....2</span>
        </p>
        <p>
            <span class="h-child three w-50">
                ....这个元素也是在浮动3........这个元素也是在浮动3........这个元素也是在浮动3........这个元素也是在浮动3........这个元素也是在浮动3........这个元素也是在浮动3........这个元素也是在浮动3........这个元素也是在浮动3........这个元素也是在浮动3........这个元素也是在浮动3........这个元素也是在浮动3........这个元素也是在浮动3........这个元素也是在浮动3....
            </span><span class="h-child-right four w-50">....这个元素也是在浮动4.... ....这个元素也是在浮动4........这个元素也是在浮动4........这个元素也是在浮动4........这个元素也是在浮动4........这个元素也是在浮动4........这个元素也是在浮动4........这个元素也是在浮动4........这个元素也是在浮动4........这个元素也是在浮动4........这个元素也是在浮动4........这个元素也是在浮动4....</span>
        </p>
        <div>
            dd
        </div>
    </div>


</body>
</html>